<extend name="Base/common"/>

<block name="header">


    <!--<header class="jumbotron subhead" id="overview">-->
        <!--<div class="container">-->
            <!--<h2>源自相同起点，演绎不同精彩！871car</h2>-->
            <!--<p class="lead"></p>-->
        <!--</div>-->
    <!--</header>-->


    <!--start slider-->
    <link href="__CSS__/871carcss/camera.css" rel="stylesheet" type="text/css" media="all" />
    <script src="__JS__/871carjs/jquery.min.js"></script>
    <script type='text/javascript' src="__JS__/871carjs/jquery.mobile.customized.min.js"></script>
    <script type='text/javascript' src="__JS__/871carjs/jquery.easing.1.3.js"></script>
    <script type='text/javascript' src="__JS__/871carjs/camera.min.js"></script>
    <!--下面是关于camera的各种参数，只有一部分，转自http://www.jq22.com/jquery-info1792  http://www.cnblogs.com/pp9527/p/5499600.html-->

    <script type="text/javascript">
        jQuery(function(){

            jQuery('#camera_wrap_2').camera({

                loader: 'bar',
                pagination: false,
                thumbnails: true
            });


            //-----------------------------------------

        });
    </script>
    <!--end slider-->
    <!--start gallery-->
    <script type="text/javascript" src="__JS__/871carjs/jquery.easing.min.js"></script>
    <script type="text/javascript" src="__JS__/871carjs/jquery.mixitup.min.js"></script>
    <script type="text/javascript">
        $(function () {

            var filterList = {


                init: function () {

                    // MixItUp plugin
                    // http//mixitup.io
                    $('#gallerylist').mixitup({
                        targetSelector: '.portfolio',
                        filterSelector: '.filter',
                        effects: ['fade'],
                        easing: 'snap',
                        // call the hover effect
                        onMixEnd: filterList.hoverEffect()
                    });

                },

                hoverEffect: function () {

                    // Simple parallax effect
                    $('#gallerylist .portfolio').hover(
                            function () {
                                $(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
                                $(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');
                            },
                            function () {
                                $(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
                                $(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');
                            }
                    );

                }

            };

            // Run the show!
            filterList.init();


        });
    </script>
    <!--Add fancyBox main JS and CSS files-->
    <script src="__JS__/871carjs/jquery.magnific-popup.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.popup-with-zoom-anim').magnificPopup({
                type: 'inline',
                fixedContentPos: false,
                fixedBgPos: true,
                overflowY: 'auto',
                closeBtnInside: true,
                preloader: false,
                midClick: true,
                removalDelay: 300,
                mainClass: 'my-mfp-zoom-in'
            });
        });
    </script>

</block>

<block name="side">
<!-- 左侧 nav
================================================== -->
    <!--<div class="span3 bs-docs-sidebar">-->
        <!--<ul class="nav nav-list bs-docs-sidenav">-->
            <!--{:W('Category/lists', array(1, true))}-->
        <!--</ul>-->
    <!--</div>-->
</block>

<block name="body">

    <!-- Contents
    ================================================== -->
    <!-- start slider -->
    <div class="main-con">
        <div class="slider">
            <div class="color" style="height:150px;"> <span style="height:150px;"> </span></div>
            <div class="wrap">
                <div class="fluid_container">
                    <div class="camera_wrap camera_magenta_skin" id="camera_wrap_2">
                        <div data-thumb="__IMG__/871carimages/them2.jpg" data-src="__IMG__/871carimages/slider2.jpg" data-link="www.baidu.com" data-target="_blank">
                            <div class="camera_caption fadeFromBottom">
                                <h2>滚动图片1</h2>
                                <p>滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍
                                    滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍
                                </p>
                            </div>
                        </div>
                        <div data-thumb="__IMG__/871carimages/them1.png" data-src="__IMG__/871carimages/slider1.jpg">
                            <div class="camera_caption fadeFromBottom">
                                <h2>滚动图片2</h2>
                                <p>滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍
                                    滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍
                                </p>
                            </div>
                        </div>
                        <div data-thumb="__IMG__/871carimages/them3.jpg" data-src="__IMG__/871carimages/slider3.jpg">
                            <div class="camera_caption fadeFromBottom">
                                <h2>滚动图片3</h2>
                                <p>滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍
                                    滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍
                                </p>
                            </div>
                        </div>
                        <div data-thumb="__IMG__/871carimages/them4.jpg" data-src="__IMG__/871carimages/slider4.jpg">
                            <div class="camera_caption fadeFromBottom">
                                <h2>滚动图片4</h2>
                                <p>滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍
                                    滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍
                                </p>
                            </div>
                        </div>
                        <div data-thumb="__IMG__/871carimages/them2.jpg" data-src="__IMG__/871carimages/slider2.jpg">
                            <div class="camera_caption fadeFromBottom">
                                <h2>滚动图片5</h2>
                                <p>滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍
                                    滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍
                                </p>
                            </div>
                        </div>
                        <div data-thumb="__IMG__/871carimages/them6.jpg" data-src="__IMG__/871carimages/slider6.jpg">
                            <div class="camera_caption fadeFromBottom">
                                <h2>滚动图片6</h2>
                                <p>滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍
                                    滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍滚动图片介绍
                                </p>
                            </div>
                        </div>

                    </div>
                    <!-- #camera_wrap_2 -->
                </div>
                <!-- .fluid_container -->
                <div class="clear"></div>
            </div>
        </div>
        <!--end slider-->
        <!--start home-page-con-->

        <div class="home-page-con">
            <div class="wrap">
                <div class="top-grids">
                    <div class="top-grid">
                        <div class="top-grid-info">
                            <a href="{:U('Article/lists?category=40')}">
                                <img src="__IMG__/871carimages/news.png" style="margin-top: 4px;" alt=" " />
                            <h2>新闻</h2>
                            <h2>News</h2>
                            </a>
                            <div class="clear"> </div>
                        </div>
                        <!--<a href="#"><p style="padding-bottom: 10px;">1Lorem ipsum dolor sit amet, consectetur </p></a>-->
                        <!--<a href="#"><p style="padding-bottom: 10px;">2Lorem ipsum dolor sit amet, consectetur </p></a>-->
                        <!--<a href="#"><p style="padding-bottom: 10px;">3Lorem ipsum dolor sit amet, consectetur </p></a>-->
                        <!--<a href="#"><p style="padding-bottom: 10px;">4Lorem ipsum dolor sit amet, consectetur </p></a>-->
                        <!--<a href="#"><p style="padding-bottom: 10px;">5Lorem ipsum dolor sit amet, consectetur </p></a>-->
                        <article:list name="article" category="40" row="5">
                            <!--<a href="{:U('Article/detail?id='.$article['id'])}">{$article.title|msubstr=0,10} <em><php>echo date('Y-m-d',$article['update_time']);</php></em></a>-->
                            <a href="{:U('Article/detail?id='.$article['id'])}"><p style="padding-bottom: 10px;">{$article.title|msubstr=0,21}&nbsp;&nbsp;&nbsp;&nbsp; <em><php>echo date('Y-m-d',$article['update_time']);</php></em></p></a>
                        </article:list>
                        <!--<a class="btn" href="portofolioitem.html">更多</a>-->
                        <a class="btn" href="{:U('Article/lists?category=40')}">更多</a>
                    </div>
                    <div class="top-grid">
                        <div class="top-grid-info">
                            <a href="{:U('Article/lists?category=41')}">
                            <img src="__IMG__/871carimages/active.png" alt=" " />
                            <h2>活动</h2>
                            <h2>Activity</h2>
                                </a>
                            <div class="clear"> </div>
                        </div>
                        <article:list name="article" category="41" row="5">
                            <a href="{:U('Article/detail?id='.$article['id'])}"><p style="padding-bottom: 10px;">{$article.title|msubstr=0,21}&nbsp;&nbsp;&nbsp;&nbsp; <em><php>echo date('Y-m-d',$article['update_time']);</php></em></p></a>
                        </article:list>
                        <a class="btn" href="{:U('Article/lists?category=41')}">更多</a>
                    </div>
                    <div class="top-grid">
                        <div class="top-grid-info">
                            <a href="{:U('Article/lists?category=42')}">
                            <img src="__IMG__/871carimages/discover.png" alt=" " />
                            <h2>发现</h2>
                            <h2>Discover</h2>
                                </a>
                            <div class="clear"> </div>
                        </div>
                        <!--<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </p>-->
                        <article:list name="article" category="42" row="5">
                            <a href="{:U('Article/detail?id='.$article['id'])}"><p style="padding-bottom: 10px;">{$article.title|msubstr=0,21}&nbsp;&nbsp;&nbsp;&nbsp; <em><php>echo date('Y-m-d',$article['update_time']);</php></em></p></a>
                        </article:list>
                        <a class="btn" href="{:U('Article/lists?category=42')}">更多</a>
                    </div>
                    <div class="clear"> </div>
                </div>

                <div class="heading">
                    <h2>文创作品</h2>
                    <h6> </h6>
                    <div class="clear"> </div>
                </div>




                <!--end home-page-con-->
                <div class="main_btm">

                    <!--start-mfp -->
                    <div id="small-dialog1" class="mfp-hide">
                        <div class="pop_up">
                            <h2>作品</h2>
                            <!--<img src="__IMG__/871carimages/popup.jpg" alt=" " />-->
                            <img src="__IMG__/871carimages/image2.jpg" alt="Image 1" />
                            <p class="para">介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容</p>
                        </div>
                    </div>
                    <!--end-mfp -->
                    <!--start-content-->
                    <div class="gallery">
                        <div class="clear"> </div>
                        <div class="container">

                            <div id="gallerylist">

                                <div class="gallerylist-wrapper">
                                    <a class="popup-with-zoom-anim" href="#small-dialog1">
                                        <img src="__IMG__/871carimages/image2.jpg" alt="Image 1" />
                                        <span><img src="__IMG__/871carimages/plus.png" alt=" "/> </span>
                                    </a>
                                    <a href="www.baidu.com">
                                        <div class="desc">
                                            <h2>作品1</h2>
                                            <h3>june 15,2014</h3>
                                        </div>
                                    </a>
                                </div>
                                <div class="gallerylist-wrapper">
                                    <a class="popup-with-zoom-anim" href="#small-dialog1">
                                        <img src="__IMG__/871carimages/image2.jpg" alt="Image 2" />
                                        <span><img src="__IMG__/871carimages/plus.png" alt=" "/> </span>
                                        <div class="desc">
                                            <h2>作品2</h2>
                                            <h3>june 15,2014</h3>
                                        </div>
                                    </a>
                                </div>
                                <div class="gallerylist-wrapper">
                                    <a class="popup-with-zoom-anim" href="#small-dialog1">
                                        <img src="__IMG__/871carimages/image4.jpg" alt="Image 3" />
                                        <span><img src="__IMG__/871carimages/plus.png" alt=" "/> </span>
                                        <div class="desc">
                                            <h2>作品3</h2>
                                            <h3>june 15,2014</h3>
                                        </div>
                                    </a>
                                </div>
                                <div class="gallerylist-wrapper">
                                    <a class="popup-with-zoom-anim" href="#small-dialog1">
                                        <img src="__IMG__/871carimages/image4.jpg" alt="Image 4" />
                                        <span><img src="__IMG__/871carimages/plus.png" alt=" "/> </span>
                                        <div class="desc">
                                            <h2>作品4</h2>
                                            <h3>june 15,2014</h3>
                                        </div>
                                    </a>
                                </div>

                            </div>
                        </div>
                    </div>
                    <!-- container -->
                    <script type="text/javascript" src="__JS__/871carjs/fliplightbox.min.js"></script>
                    <script type="text/javascript">$('body').flipLightBox()</script>
                    <div class="clear"> </div>
                </div>

            </div>
        </div>
        <!--End-gallery-->

    </div>



    <!--old-->
    <!--<div class="span9">-->
        <!--&lt;!&ndash; Contents-->
        <!--================================================== &ndash;&gt;-->
        <!--<section id="contents">-->
            <!--<article:list name="article" category="1" child="true">-->
                <!--<div class="">-->
                    <!--<h3><a href="{:U('Article/detail?id='.$article['id'])}">{$article.title}</a></h3>-->
                <!--</div>-->
                <!--<div>-->
                    <!--<p class="lead">{$article.description}</p>-->
                <!--</div>-->
                <!--<div>-->
                    <!--<span><a href="{:U('Article/detail?id='.$article['id'])}">查看全文</a></span>-->
                    <!--<span class="pull-right">-->
                        <!--<span class="author">{$article.uid|get_username}</span>-->
                        <!--<span>于 {$article.create_time|date='Y-m-d H:i',###}</span> 发表在 <span>-->
                        <!--<a href="{:U('Article/lists?category='.get_category_name($article['category_id']))}">{$article.category_id|get_category_title}</a></span> ( 阅读：{$article.view} )-->
                    <!--</span>-->
                <!--</div>-->
                <!--<hr/>-->
            <!--</article:list>-->

        <!--</section>-->
    <!--</div>-->
    <!--old-->


</block>